<template>
  <div class="comment-reply">
    <!-- 头部信息 -->
    <van-nav-bar :title="`${comment.reply_count}条回复`">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('close')"
      />
    </van-nav-bar>
    <!-- /头部信息 -->

    <!-- 当前评论项 -->
    <comment-item
      :comment="comment"
    />
    <!-- /当前评论项 -->

    <!-- 所有评论回复 -->
    <comment-list
      :source="comment.com_id"
      type="c"
      :list="commentList"
    />
    <!-- /所有评论回复 -->

    <!-- 底部区域-->
    <div class="article-bottom">
       <van-button
          class="comment-btn"
          type="default"
          round
          size="small"
          @click="isPostShow = true"
       >写评论</van-button>
    </div>
    <!-- /底部区域-->

    <!-- 发布回复 -->
    <van-popup
       v-model="isPostShow"
       position="bottom"
    >
      <post-comment
        :target="comment.com_id"
        :article-id="articleId"
        @post-success="onPostSuccess"
      />
    </van-popup>
    <!-- /发布回复 -->
  </div>
</template>

<script>
  import CommentItem from './comment-item'
  import CommentList from './comment-list'
  import PostComment from './post-comment'

  export default {
   name: 'CommentReply',
	 components:{
     CommentItem,
     CommentList,
     PostComment
   },
	 props:{
     //查看回复的评论项
     comment:{
       type:Object,
       required:true
     },
     articleId:{
       type:[Number,String,Object],
       required:true
     }
   },
   data () {
     return {
       isPostShow:false,
       commentList:[] //评论的回复列表
     }
   },
	 computed: {},
	 watch: {},
	 created () {},
	 mounted() {},
   methods:{
     onPostSuccess (comment) {
       //将发布成功的评论放到评论列表的顶部
       this.commentList.unshift(comment)

       //更新评论的回复数量
       this.comment.reply_count++

       //关闭发布回复的弹出层
       this.isPostShow = false
     }
   }
  }
</script>

<style scoped lang="less">
  .article-bottom{
    width:375px;
    height:44px;
    position:fixed;
    bottom:0;
    left:0;
    z-index:999;
    background-color:#ffffff;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    .comment-btn{
      width:150px;
    }
  }
</style>
